
class AlertDismissable extends React.Component {
    constructor(...args) {
        super(...args);

        this.handleAlertShow = this.handleAlertShow.bind(this);
        this.handleAlertDismiss = this.handleAlertDismiss.bind(this);

        this.state = {
            alertVisible: true
        };
    }

    handleAlertDismiss() {
        this.setState({ alertVisible: false });
    }

    handleAlertShow() {
        this.setState({ alertVisible: true });
    }

    render() {
        if (this.state.alertVisible) {
            return (
                <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
                    <h4>Oh snap! You got an error!</h4>
                    <p>
                        Change this and that and try again. Duis mollis, est non commodo
						luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
						Cras mattis consectetur purus sit amet fermentum.
					</p>
                    <p>
                        <Button bsStyle="danger">Take this action</Button>
                        <span> or </span>
                        <Button onClick={this.handleAlertDismiss}>Hide Alert</Button>
                    </p>
                </Alert>
            );
        }

        return <Button onClick={this.handleAlertShow}>Show Alert</Button>;
    }
}

ReactDOM.render(<AlertDismissable />, document.getElementById('root'));
